<script setup lang="ts">
import { ResourceContentVO } from '@/api/resource/content'
import VideoPlayer from "@/components/DiyEditor/components/mobile/VideoPlayer/index.vue";

const emit = defineEmits(['delete', 'update'])

defineProps<{
  list: ResourceContentVO[]
}>()

const handleVideoProperty = (item: ResourceContentVO) => {
  return {
    videoUrl: item.url,
    // style: {
    //   height: 200,
    // }
  }
}

const handleUpdate = (id: number) => {
  emit('update', id)
}

const handleDelete = (id: number) => {
  emit('delete', id)
}
</script>

<template>
  <el-row>
    <el-col v-for="item in list" :key="item.id" :span="6">
      <el-card class="card">
        <template #header>
          <VideoPlayer :property="handleVideoProperty(item)" />
        </template>

        <el-space direction="vertical" alignment="normal">
          <el-text size="large">{{ item.name }}</el-text>
          <el-text type="info">{{ item.remark }}</el-text>
          <div>
            <el-button type="primary" link @click="handleUpdate(item.id)">修改</el-button>
            <el-button type="danger" link @click="handleDelete(item.id)">删除</el-button>
          </div>
        </el-space>
      </el-card>
    </el-col>
  </el-row>
</template>

<style scoped lang="scss">
.card {
  margin: 8px;

  :deep(.el-card__header) {
    padding: 4px;


    display: flex;
    //align-items: center;
    justify-content: center;
  }

  :deep(.el-card__body) {
    padding: 16px;
  }
}
</style>
